<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 查询参数 -->
          <go2-query v-if="false" :searchParam="searchParam" @on-search="search"></go2-query>
        </a-card>
      </a-col>
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 列表 -->
          <go2-table
            ref="tableRef"
            rowKey="id"
            :fetch="fetch"
            :tableLayout="'fixed'"
            :columns="columns"
            :toolbar="toolbar"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{
              selectedRowKeys: state.selectedRowKeys,
              onChange: onSelectChange,
            }"
          >
            <!-- 继承至 a-table 的默认插槽 -->
          </go2-table>
        </a-card>
      </a-col>
    </a-row>
    <add :visible="state.visibleAdd" @close="closeAdd"></add>
  </page-layout>
</template>

<script>
import { useI18n } from "vue-i18n";
import add from "./modal/add.vue";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { list, remove, batchRemove } from "@/core/api/module/AdminSms";
import { reactive, createVNode, ref, toRaw } from "vue";

const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  components: {
    add,
  },
  setup() {
    const { t } = useI18n();
    const tableRef = ref();

    /// 删除配置
    const removeMethod = (record) => {
      Modal.confirm({
        title: t("confirm") + t("delete") + "?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: t("ok"),
        cancelText: t("cancel"),
        onOk() {
          message.loading({ content: t("loading"), key: removeKey });
          remove({ id: record.id }).then((response) => {
            if (response.code == 0) {
              message
                .success({ content: t('Delete succeeded!'), key: removeKey, duration: 1 })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: response.msg,
                key: removeKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    //批量删除
    const batchremoveMethod = () => {
      const romovekeys = toRaw(state.selectedRowKeys);
      if (romovekeys.length <= 0) {
        message.error({
          content: t("please chose"),
          key: removeBatchKey,
          duration: 1,
        });
        return false;
      }
      Modal.confirm({
        title: t("confirm") + t("delete") + "?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: t("ok"),
        cancelText: t("cancel"),
        onOk() {
          message.loading({ content: t("loading"), key: removeBatchKey });
          batchRemove({ id: romovekeys }).then((response) => {
            if (response.code == 0) {
              message
                .success({
                  content: t('Saved successfully!'),
                  key: removeBatchKey,
                  duration: 1,
                })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: t(response.msg),
                key: removeBatchKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    /// 列配置
    const converFormat = [
      { label: "Sending", value: 0, tag: { color: "blue" } },
      { label: "Delivered", value: 1, tag: { color: "green" } },
    ];
    const columns = [
      { dataIndex: "receiver", key: "receiver", width: "10%" },
      { dataIndex: "field", key: "field", width: "20%" },
      { dataIndex: "content", key: "content" },
      { dataIndex: "create_time", key: "create_time" },
      { dataIndex: "update_time", key: "update_time" },
      { dataIndex: "status", key: "status", conver: converFormat },
    ];

    /// 数据来源
    const fetch = async (param) => {
      const response = await list(param);
      return response;
    };

    /// 工具栏
    const toolbar = [
      {
        label: "add",
        code: "admin.sms:add",
        event: function () {
          state.visibleAdd = true;
        },
      },
      {
        label: "batchRemove",
        code: "admin.sms:batchRemove",
        event: batchremoveMethod,
      },
    ];

    /// 行操作
    const operate = [
      {
        label: "remove",
        code: "admin.sms:remove",
        event: function (record) {
          removeMethod(record);
        },
      },
    ];

     /// 分页参数
    const pagination =reactive({ 
      pageSize:15
    }); 

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleAdd: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
    });

    /// 查询参数
    const searchParam = [
      { key: "receiver", type: "input", label: "receiver" },
      { key: "content", type: "input", label: "content" },
      {
        key: "status",
        type: "select",
        label: "status",
        value: 2,
        options: [
          { text: "All", value: 2 },
          { text: "Delivered", value: 1 },
          { text: "Sending", value: 0 },
        ],
      },
    ];

    /// 查询操作
    const search = function (value) {
      state.param = value;
      if (pagination) {
        pagination.current = 1;
      }
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeAdd = function (e) {
      state.visibleAdd = false;
      if (e) {
        tableRef.value.reload();
      }
    };

    const closeEdit = function (e) {
      state.visibleEdit = false;
      if (e) {
        tableRef.value.reload();
      }
    };

    const closeInfo = function (e) {
      state.visibleInfo = false;
      if (e) {
        tableRef.value.reload();
      }
    };

    return {
      t,
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,
      closeAdd,
      closeEdit,
      closeInfo,
      tableRef,
    };
  },
};
</script>